<template>
  <div id="m-header">
    <mu-appbar>
      <mu-icon-button icon='menu' slot="left" />
      <mu-text-field icon="search" class="appbar-search-field" hintText="搜索音乐" />
      <mu-icon-menu icon="more_vert" slot="right">
        <mu-menu-item title="默认主题" @click="changeTheme('light')" />
        <mu-menu-item title="夜色主题" @click="changeTheme('dark')" />
        <mu-menu-item title="暗色色主题" @click="changeTheme('carbon')" />
        <mu-menu-item title="绿色主题" @click="changeTheme('teal')" />
      </mu-icon-menu>
    </mu-appbar>
  </div>
</template>
<script>
  import light from "!raw-loader!@/assets/theme/theme-default.css"
  import dark from "!raw-loader!@/assets/theme/theme-dark.css"
  import carbon from "!raw-loader!@/assets/theme/theme-carbon.css"
  import teal from "!raw-loader!@/assets/theme/theme-teal.css"
  export default {
    name: "m-header",
    data() {
      return {
        theme: '',
        themes: {
          light,
          dark,
          carbon,
          teal
        }
      };
    },
    methods: {
      //切换主题
      changeTheme(theme) {
        this.theme = theme
        const styleEl = this.getThemeStyle()
        styleEl.innerHTML = this.themes[theme] || ''
      },
      //   获取主题css文件,然后加载到页面
      getThemeStyle() {
        const themeId = 'muse-theme'
        let styleEl = document.getElementById(themeId)
        if (styleEl) {
          return styleEl
        }
        styleEl = document.createElement('style')
        styleEl.id = themeId
        document.body.appendChild(styleEl)
        return styleEl
      },
    }
  }

</script>
<style lang="scss" scoped>
  #m-header {
    z-index: initial;
  }
  .mu-text-field {
    margin-bottom: 0px;
  }

</style>
